import ReactEcharts from 'echarts-for-react'
import * as echarts from 'echarts'

import '../tooltip.less'
import {useEffect, useState} from "react";

const sexBar = (props: any) => {
    const {color, datas} = props
    const [option, setOption] = useState({})
    useEffect(() => {
        setOption({
            xAxis: {
                max: 100,
                splitLine: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            grid: {
                left: 0,
                top: 0, // 设置条形图的边距
                right: '0%',
                bottom: 0
            },
            yAxis: [{
                type: "category",
                inverse: false,
                data: datas,
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            }],
            series: [{
                // 内
                type: "bar",
                barWidth: 14,

                legendHoverLink: false,
                silent: true,
                itemStyle: {
                    color: color ? color : '#0FFFF1'
                },
                label: {
                    show: false,
                },
                data: datas,
                z: 1,
                animationEasing: "elasticOut"
            },
                {
                    // 分隔
                    type: "pictorialBar",
                    itemStyle: {
                        color: "#000",
                    },
                    symbolRepeat: "fixed",
                    symbolMargin: 2,
                    symbol: "rect",
                    symbolClip: true,
                    symbolSize: [2, 14],
                    symbolPosition: "start",
                    symbolOffset: [1, -1],
                    symbolBoundingData: 100,
                    data: datas,
                    z: 2,
                    animationEasing: "elasticOut"
                },

                {
                    name: "外框",
                    type: "bar",
                    barGap: "-140%", // 设置外框粗细
                    data: [100],
                    barWidth: 22,
                    itemStyle: {
                        color: "transparent", // 填充色
                        borderColor: color ? color : "#0FFFF1", // 边框色
                        barBorderWidth: 1, // 边框宽度
                        borderRadius: 3, //圆角半径
                        shadowColor: color ? color : "#0FFFF1",
                        shadowBlur: 7,
                        label: {
                            // 标签显示位置
                            show: false,
                            position: "top" // insideTop 或者横向的 insideLeft
                        }
                    },
                    z: 0
                }
            ]
        })
    }, [datas])
    return (
        <div style={{width: '100%', height: '100%'}}>
            <ReactEcharts
                echarts={echarts}
                {...props}
                option={option}
                style={{width: '100%', height: 22}}
            />
        </div>
    )
}
export default sexBar
